<template>
  <div class="app-container">
    <div v-if="nocreate">
      <el-row :gutter="20" style="margin-bottom: 10px">
        <!-- 搜索栏 -->
        <el-col :span="16">
          <el-button type="primary" @click="addProduct">添加商品</el-button>
        </el-col>
        <el-col :span="8">
          <el-input
            style="width: 60%; margin-right: 10px"
            v-model="searchForm.name"
            placeholder="请输入产品名称"
            clearable
            @clear="getGoosListpage"
          />
          <el-button type="warning" @click="getGoosListpage">搜索</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 左侧分类管理 -->
        <el-col :span="4">
          <el-card class="box-card">
            <el-tree
              :data="categoryData"
              :props="treeProps"
              default-expand-all
              node-key="id"
              @node-contextmenu="handleRightClick"
            />
          </el-card>
        </el-col>

        <!-- 右侧商品列表 -->
        <el-col :span="18">
          <el-table :data="productData" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="picture" label="图片" width="120">
              <template slot-scope="scope">
                <img
                  :src="scope.row.picture"
                  alt="商品图片"
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>

            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="stock" label="库存" />

            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="editProduct(scope.row)"
                  >编辑</el-button
                >
                <el-button size="mini" @click="offShelf(scope.row)"
                  >下架</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteProduct(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalProducts"
          />
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <!-- <el-button @click="nocreate = true">返回列表</el-button> -->
      <createProduct ref="createProduct" />
    </div>
    <!-- 没有门店需要激活 -->
    <el-dialog
      title="请激活"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <div class="title-container" v-if="!isactive">
          <div class="title" @click="activeUrl">
            您还没有门店激活，快去激活吧
          </div>
        </div>
        <div v-else class="title-container">
          <div class="title">您已经激活过门店，快去查看吧</div>
          <div>
            <span>同步美团</span>
            <el-input v-model="poiCodes" placeholder="请输入并同步" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="synchronization">确定</el-button>
      </span>
    </el-dialog>
    <!-- 创建编辑商品组件 -->
  </div>
</template>
<script>
import DropdownMenu from "@/components/Share/DropdownMenu";
import { listActionsMixin } from "@/components/curd/curd";
import { mapState, mapGetters } from "vuex";
import createProduct from "@/components/newGoods";
import {
  updatesynchronization,
  getGoodsCategory,
  getMTGoodsList,
  getMTGoodscategory,
} from "@/api/goods";
export default {
  name: "Documentation",
  components: { DropdownMenu, createProduct },
  mixins: [listActionsMixin],
  data() {
    return {
      dialogVisible: false,
      isactive: false,
      poiCodes: "", //同步美团门店编码
      categoryData: [],
      treeProps: {
        children: "children",
        label: "label",
      },
      productData: [],
      currentPage: 1,
      pageSize: 10,
      totalProducts: 100,
      searchForm: {
        categoryName: "", // 分类名称
        name: "", // 商品名称
      },
      nocreate: false
    };
  },
  computed: {
    ...mapGetters(["info"]),
  },
  created() {
    // console.log(this.info)
  },
  mounted() {
    console.log(this.info, "我是用户信息啦啦啦啦啦");
    if (this.info.storeList.length == 0) {
      this.dialogVisible = true;
    } else {
      this.getcategory();
    }
  },
  methods: {
    addProduct() {
      this.nocreate = false
    },
    handleClose() {
      this.dialogVisible = false;
    },
    activeUrl() {
      window.open(
        `https://shangoue.meituan.com/#/tscc/poi/newAuthorize?type=detail&code=X58ABi3vs8KhORHSKUe%2BPjS2iP3dcLF1qr4hbB4IibjJiKmNPz3fEwsfwEiPeaPgwoUhZQwNv3Q1uc6y97SvY3XSg13zmEZjC3ToVZJFjec%3D&authorize_method=oauth`
      );
      this.dialogVisible = false;
      this.isactive = true;
    },
    // 同步美团门店编码
    synchronization() {
      updatesynchronization({ poiCodes: this.poiCodes }).then((res) => {
        console.log(res, "同步成功");
      });
    },
    // 获取商品分类
    getcategory() {
      getMTGoodscategory({ storeId: this.info.storeList[0].id })
        .then((res) => {
          console.log(res, "获取商品分类");
          if (res.code == 200) {
            let data = res.data.map((item) => {
              return {
                id: item.id,
                label: item.name,
                children: item.foodCategories.map((v) => {
                  return {
                    id: v.id,
                    label: v.name,
                  };
                }),
              };
            });
            this.categoryData = data;
            this.categoryData.unshift({
              id: 1,
              label: "所有分类",
              children: [],
            });
            // this.getGoodsList();
            this.getGoosListpage();
          }
        })
        .catch((err) => {
          console.log(err, "获取商品分类失败");
        });
    },
    // 获取商品列表
    getGoosListpage() {
      getMTGoodsList({
        ...this.searchForm,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res, "获取商品列表");
        // if (res.code == 200) {
        this.productData = res.results;
        this.totalProducts = res.total;
        // }
      });
    },
    // 点击分类
    handleRightClick(val) {
      debugger;
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-container {
  .title {
    color: #ffcc33;
    cursor: pointer;
  }
}
.box-card {
  max-height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  // max-width: 300px;
}
</style>
